<template>
  <div class="art_show_class">
    <div class="show" v-for="v in arts">
      <div class="img">
        <img :src="v.src" alt="">
      </div>
      <div class="info">
        <div class="author">{{v.author}}</div>
        <div class="infomation"><span class="cailiao">{{v.cailiao}}</span> , <span class="name">{{v.name}}</span></div>
        <div class="price">{{v.price}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default{
  props: ['arts'],
  name: ''
}
</script>
<style scoped lang="less">
  .art_show_class{
    display: flex;
    flex-wrap: wrap;
    .show{
      // display: inline-block;
      // float: right;
      width: 50%;
      .img{
        width: 90%;
        margin: auto;
      }
      img{
        width: 100%;
      }
    }
    .info{
      text-align: right;
      width: 90%;
      margin: auto;
      .author{
        font-size: 0.9em;
        font-weight: bold;
        margin: 5px 0;
      }
      .infomation{
        font-size: 0.8em;
        color: #666;
        margin: 5px 0;
      }
      .price{
        font-size: 0.9em;
        margin: 5px 0;
      }
    }
  }
</style>